<template>
 <div id="details">
  <div class="bg">
   <!-- <img :src="" alt=""> -->

   <div class="portrait">
    <img :src="dow.coverImgUrl" alt="" />
    <div class="gedan">歌单</div>
    <div class="num">
     <span class="icon">
      <i class="iconfont icon-headset " style=";color: #fff; font-size:20px">
      </i>
     </span>

     108.1万
    </div>
   </div>
   <div class="songname">
    <h2 class="namea">{{ dow.name }}</h2>

    <!-- <template v-for="it in uu"> -->
    <div class="uo" @click="yy(uu)">
     {{ dow.__ob__.value.creator.nickname }}
    </div>
    <!-- </template> -->
   </div>
  </div>

  <div class="songlist">歌曲列表</div>
  <ul>
   <template v-for="(item, index) in list">
    <li :key="item.id" @click="bof(item.id)">
     <div class="content">
      <div class="num">{{  index + 1 > 9 ?  index+1 : ('0' + (index+1))}}</div>
      <div class="content_text">
       <div class="text_1">
        <div class="text_a">{{ item.name }}</div>
        <div class="text_b">{{ item.ar[0].name }}-{{ item.al.name }}</div>
       </div>
       <div class="text_2">
        <i class="iconfont icon-bofang" style=";color:#c1c1c1; font-size:30px">
        </i>
       </div>
      </div>
     </div>
    </li>
   </template>
  </ul>
  <div class="text">查看更多歌曲，请下载客户端</div>

  <!-- <ul>
   <template v-for="(item, index) in to">
    <li :key="item.id">
     <div class="news">
      <div class="a">
       <a href="">
        <img :src="to[index].user.avatarUrl" alt="" />
       </a>
      </div>
      <div class="b">
       <div class="newname">{{ to[index].user.nickname }}</div>
       <span>{{ getNewtime(to[index].time) }}</span>
       <div class="newwcontent">{{ to[index++].content }}</div>
      </div>
     </div>
    </li>
   </template>
  </ul> -->

  <!-- <li class="b"  >
        <ul> 
        <template v-for="(item,index) in to">

        <li :key="item.id" >
          <div class="newname"> {{to[index].user.nickname}}</div>
          <span>15:27</span>
         </li> -->
  <!-- <div class="newname"></div> -->

  <!-- <div class="newwcontent"></div>
        这套曲子最大的魔力不在于似乎可以永不停歇的演奏下去，而是总能在我听的稍有睡意的时候突然变身交响乐把我吵的睡意全无，现在凌晨3：10。
      </div>
      </template>
      </ul>
      
      </li> -->
 </div>
</template>

<script>
export default {
 created() {
  console.log(this.$route.query.id);
 },
 async mounted() {
  let res = await this._axios.get(
   `/playlist/detail?id=${this.$route.query.id}`
  );
  this.list = res.data.playlist.tracks.slice(0, 10);
  //  console.log(res);
  let rbs = await this._axios.get(
   `/comment/playlist?id=${this.$route.query.id}`
  );
  // console.log(rbs);
  this.to = rbs.data.comments.slice(0, 10);
  // console.log(rbs);

  let head = await this._axios.get(
   `/playlist/detail?id=${this.$route.query.id}`
  );
  this.dow = head.data.playlist;
  //  console.log(head);
  //  console.log(this.dow);
  // console.log(this.to);
  // console.log(this.list);
  // console.log(res.data);
  let rb = await this._axios.get(`/playlist/detail?id=${this.$route.query.id}`);
  this.uu = rb.data.playlist.userId;
  console.log(this.uu);
 },
 data: () => {
  return {
   list: [],
   to: [],
   dow: [],
   uu: "",
  };
 },
 methods: {
  bbb(id) {
   // console.log(11);
   this.$router.push({ name: "details", query: { id } });
  },
  bof(id) {
   this.$router.push({ name: "bo", query: { id } });
  },
  getNewtime(a) {
   let date = new Date(a);

   let year = date.getFullYear();
   let month = date.getMonth() + 1;
   let day = date.getDate();
   return `${year}年${month}月${day}日`;
  },
  yy(id) {
   this.$router.push({ name: "home", query: { id } });
  },
 },
};
</script>

<style lang="scss" scoped>
#details {
 width: 100%;
 .bg {
  width: 100%;
  background-image: url("https://p1.music.126.net/w8HtRC-TK4ZLFJTMbD16jQ==/109951165307788332.jpg");
  height: _vw(380);
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: space-around;
  align-items: center;

  img {
   // width: 100%;
   height: 100%;
  }
  .portrait {
   width: _vw(255);
   height: _vw(255);
   background-color: skyblue;
   display: flex;
   color: #fff;
   justify-content: space-between;
   position: relative;
   .gedan {
    padding: _vw(0) _vw(5);
    position: absolute;
    height: _vw(5);
    top: 10px;
    width: _vw(70);
    padding-bottom: _vw(35);
    background-color: rgba(217, 48, 48, 0.8);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 17px;
    // width: 20px;
    // height: 30px;
   }
   .num {
    position: absolute;
    right: 0;
    font-size: 10px;
    text-shadow: 1px 0 0 rgb(0 0 0 / 15%);
    z-index: 3;
    color: #fff;
   }
  }
  .songname {
   width: _vw(420);
   height: _vw(255);
   // background-color: yellowgreen;
   .namea {
    font-size: _vw(32);
    color: #fefefe;
    line-height: 1.3;
    padding-top: _vw(15);
   }
   .songtext {
    color: hsla(0, 0%, 100%, 0.7);
    // img{
    //   // height: 20px;
    //   width: 100%;
    //   background-repeat:no-repeat;
    //   border-radius: 50%;
    //   vertical-align: middle;
    // }
   }
  }
 }
 .songlist {
  padding: 0 _vw(20);
  color: #666;
  font-size: _vw(25);
  background-color: #eeeff0;
  height: _vw(50);
  line-height: _vw(50);
 }
 .content {
  height: _vw(110);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #c1c1c1;
  .num {
   width: _vw(20);
   font-size: _vw(35);
   // color: red;
   color: #888;
  }
  .content_text {
   width: _vw(670);
   display: flex;
   justify-content: space-between;
   align-items: center;

   vertical-align: top;

   // text_2{
   // padding-top: 20px;
   // }

   .text_a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: _vw(28);
    color: #333333;
   }
   .text_b {
    font-size: _vw(24);
    margin-bottom: 10px;
    color: #888;
   }
  }
 }
 .text {
  margin-top: _vw(20);
  margin-bottom: _vw(20);
  color: #999;
  font-size: _vw(28);
  text-align: center;
 }
 .news {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: _vw(20);

  .a {
   width: _vw(60);
   height: _vw(60);
   // margin-top: _vw(0);
   img {
    border-radius: 50%;
    width: 35px;
   }
  }
  .b {
   width: _vw(600);
   margin-left: _vw(-30);
   border-bottom: 1px solid #c1c1c1;
   margin-bottom: _vw(22);
   .newname {
    font-size: _vw(40/1.2);
    color: #666;
   }
   span {
    font-size: _vw(15);
    color: #666;
   }
   .newwcontent {
    color: #333;
    font-size: _vw(32);
    line-height: _vw(40);
    word-wrap: break-word;
   }
  }
 }
 .uo {
  color: #fff;
 }
}
</style>
